import Vue from 'vue'
import Vuex from 'vuex'
import $ from 'jquery'
import http from '@/util/http'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
    plugins: [createPersistedState({
        // reduce就是让本地存储的值只有return的值
        reducer(state) {
            return {
                cityId: state.cityId,
                cityName: state.cityName
            }
        }
    })],

    state: {
        cityId: '350100',
        cityName: '福州',
        cinemaData: [],
        isTabbarShow: true,
    },
    // 统一管理，被devtools记录状态的修改
    //  mutations只支持同步
    mutations: {
        changeName(state, cityName) {
            state.cityName = cityName
            state.cinemaData = []
        },
        changeCityId(state, cityId) {
            state.cityId = cityId
        },
        setCinemaData(state, data) {
            console.log('setCinemaData被使用')
            state.cinemaData = data
        },
        hide(state) {
            state.isTabbarShow = false
        },
        show(state) {
            state.isTabbarShow = true
        }
    },
    // 异步同步都能支持
    actions: {
        getCinemaData(Store, cityId) {
            return http({
                url: `/gateway?cityId=${Store.state.cityId}&ticketFlag=1&k=2032880`,
                headers: {
                    'X-Host': 'mall.film-ticket.cinema.list'
                }
            }).then((res) => {
                // console.log(res.data.data.cinemas)

                Store.commit('setCinemaData', res.data.data.cinemas)

            })
        }
    },
    // modules: {}
})

// vuex 管理公共状态(分散在各个组件内的状态，统一管理)
// vuex 默认是管理在内存，一刷新页面，公共状态就丢失了
// vuex持久化 todo

/*
  vuex项目应用
  1、非父子组件通信
  3、后端数据缓存的快照，减少数据重复，减轻服务器压力，提高用户体验

*/